<%--
  @desc: 应用查看或编辑页面
  @author: chenw
  @create: 2014-4-29 下午 15:32
--%>
<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<style type="text/css">
    .main_wrap {
        margin: 0 auto;
        height: 800px;
        overflow-x: hidden;
    }

    .left {
        width: 300px;
        height: 95%;
        padding-top: 10px;
        border: 1px solid #ccc;
        margin: 5px;
        float: left;
    }

    .right {
        float: left;
        width: 700px;
        height: 95%;
        padding: 10px 10px 0 10px;
        background-color: #F4F5F9;
        border: 1px solid #ccc;
        margin: 5px;
    }

    .right .section {
        margin-top: 10px;
    }

    .right p .label {
        height: 18px;
        line-height: 18px;
        font-size: 1.1em;
        color: #7A7979;
    }

    .right input {
        width: 220px;
        height: 20px;
        line-height: 1.0;
        border-radius: 2px;
        border: 1px solid #ccc;
        font-size: 1.05em;
        text-indent: 3px;
        color: #8a8a8a;
        font-family: "微软雅黑", serif;
    }

    #file_app_upload {
        margin: 0 auto;
        border: 2px dashed #bbb;
        height: 40px;
        width: 90%;
        clear: both;
        text-align: center;
        line-height: 40px;
        font-size: 2.5em;
        color: #696969;
        cursor: pointer;
        background-color: transparent;
    }

    #file_app_upload:hover {
        border: 2px dashed #999;
        background-color: transparent;
    }

    .uploadify-button {
        color: #696969;
        background-color: transparent;
    }

    .swfupload {
        left: 61px;
    }

    .uploadify, .uploadify-button {
        background: none;
        border: none;
    }

    .uploadify:hover, .uploadify-button:hover {
        background: none;
        border: none;
    }

    .uploadify:hover .uploadify-button {
        background: none;
        border: none;
    }

    .uploadify-queue {
        display: none;
    }

    .right .title {
        width: 70px;
        display: inline-block;
        text-align: right;
    }

    .version-list {
        border: 1px solid #ccc;
        margin-top: 10px;
    }
</style>
<div class="pageContent main_wrap" style="padding-top: 1px;" title="应用升级">
    <div class="left">
        <div id="file_app_upload">+</div>
    </div>

    <div class="right">
        <form method="post" action="<c:url value='/sys/app/version/save'/>" class="pageForm required-validate"
              onsubmit="return validateCallback(this, apkUploadCallback);"
              style="height: 250px;">
            <p>
                <span class="label title">版本名称</span>
                <input type="text" name="verName" maxlength="100" placeholder="版本名称:1.0.1(正式版)" class="required"/>
                <span class="label" style="color: #746868;"></span>
            </p>

            <p class="section">
                <span class="label title">版本号</span>
                <input type="text" name="verCode" maxlength="100" placeholder="版本号" class="required"/>
            </p>

            <p class="section">
                <span class="label title">状态</span>
                <select name="status" id="status">
                    <option value="1">上线</option>
                    <option value="0">下线</option>
                </select>
            </p>

            <p class="section">
                <span class="label title" style="vertical-align: top;">升级日志</span>
                <textarea id="log" name="remark" maxlength="100" placeholder="版本号" rows="5" cols="60"
                          style="resize: none;border: 1px solid #ccc;border-radius: 2px;"></textarea>
            </p>
            <br>

            <div class="formBar">
                <ul>
                    <li>
                        <div class="buttonActive">
                            <div class="buttonContent">
                                <button type="submit">保存</button>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="button">
                            <div class="buttonContent">
                                <button type="button" class="close">取消</button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <input type="hidden" id="app_size" name="size"/>
            <input type="hidden" id="app_md5" name="md5"/>
            <input type="hidden" id="app_url" name="url"/>
        </form>
        <div class="version-list">
            <table class="table" width="100%">
                <thead>
                <tr>
                    <th width="40" align="center">序号</th>
                    <th width="110">版本名称</th>
                    <th width="110">版本号</th>
                    <th width="110">状态</th>
                    <th width="110">升级日志</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach var="version" items="${pager.list}" varStatus="vs">
                    <tr target="sel_id" rel="${channel.id}">
                        <td>${vs.count+(pager.pageNum-1)*pager.numPerPage}</td>
                        <td>${version.verName}</td>
                        <td>${version.verCode}</td>
                        <td>${version.status}</td>
                        <td>${version.remark}</td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
        <div class="panelBar">
            <!--
                    <div class="pages">
                        <span>显示&nbsp;</span>
                        <select id="cob_ps" class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">
                            <option value="5">5</option>
                            <option value="8">8</option>
                        </select>
                        <span>条，共${pager.total}条</span>
                    </div>
        -->
            <div class="pagination" targetType="navTab" totalCount="${pager.total}" numPerPage="${pager.numPerPage}"
                 pageNumShown="10"
                 currentPage="${pager.pageNum}"></div>
        </div>
        <form id="pagerForm" method="post" action="<c:url value='/sys/app/upgrade/list'/>">
            <input type="hidden" name="pageNum" value="${pager.pageNum}"/>
            <input type="hidden" name="keywords" value="${query.keywords}"/>
            <input type="hidden" name="numPerPage" value="${pager.numPerPage}"/>
            <input type="hidden" name="orderField" value="${query.orderField}"/>
            <input type="hidden" name="orderDirection" value="${query.orderDirection}"/>
        </form>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#file_app_upload').uploadify({
            swf: '<c:url value="/resource/dwz/uploadify/scripts/uploadify.swf"/>',
            uploader: '<c:url value="/sys/app/pkg/upload"/>',
            auto: true,
            fileObjName: 'apk',
            fileTypeExts: '*.apk',
            fileSizeLimit: '51200KB',
            fileTypeDesc: '应用安装包',
            buttonText: '请选择APK文件',
            removeCompleted: false,
            //formData: {"appId": "1"},
            height: 80,
            width: 190,
            multi: false,
            onUploadStart: function (file) {
                if (file) {
                    if (file.type != ".apk") {
                        $("#file_app_upload-button span").html("请选择apk类型文件");
                        this.cancelUpload(file.id);
                    } else if (file.size > 52428800) {
                        $("#file_app_upload-button span").html("文件过大，最大允许50M");
                        this.cancelUpload(file.id);
                    } else {
                        $("#file_app_upload-button span").html("开始上传");
                    }
                } else {
                    $("#file_app_upload-button span").html("请选择升级安装包文件");
                    this.cancelUpload(file.id);
                }
            },
            onUploadProgress: function (file, fileBytesLoaded, fileTotalBytes) {
                var _rate = parseInt(fileBytesLoaded / fileTotalBytes * 100);
                if (_rate < 100) {
                    $("#file_app_upload-button span").html("已上传" + _rate + "%");
                } else if (_rate == 100) {
                    $("#file_app_upload-button span").html("上传完成,正在处理...");
                }
            },
            onUploadSuccess: function (file, data, response) {

                if (data && response) {
                    var _obj = JSON.parse(data).data;
                    $("#app_size").val(_obj.size);
                    $("#app_url").val(_obj.path);
                    $("#app_md5").val(_obj.md5);
                    $("#file_app_upload-button span").html("上传成功");
                } else {
                    $("#file_app_upload-button span").html("上传失败");
                }
            },
            onUploadError: function (file, errorCode, errorMsg) {
                if (errorCode != SWFUpload.UPLOAD_ERROR.FILE_CANCELLED)
                    $("#file_app_upload-button span").html("上传失败");
            }
        });
    });

    function apkUploadCallback(resp, st, xhr) {
        if (resp && resp.succ) {
            alertMsg.info("版本信息保存成功！");
            navTab.reloadFlag('page_app_list');
        } else {
            alertMsg.info(resp.msg + "!");
        }
    }
</script>
